<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
  <style>
    ul li:first-child{
        background: aqua;
    }
    ul li:last-child{
        background: brown;
    }
    /*父元素的第n个子元素*/
    p:nth-child(1){
        background: blueviolet;
    }
    /*父元素的第n个同元素*/
    p:nth-of-type(1){
        background: yellow;
    }
    /*选中时变色*/
    p:hover{
        background: black;
    }
  </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>
</body>
</html>